var btns=document.getElementsByTagName("button");
var imgs=banner.getElementsByTagName("img");
var lis=banner.getElementsByTagName("li");
var boxs=banner.getElementsByClassName("box");
console.log(boxs)

var j=0;
for(var i=0;i<btns.length;i++){
    btns[i].onclick=function(){
        if(this.innerText==">"){
            j++;
            j==5&&(j=0)
            for(var i=0;i<imgs.length;i++){
                imgs[i].className="";
                lis[i].className=""; 
            }
            imgs[j].className="active";
            lis[j].className="active";
        }
        else{
           j--;
           j==-1&&(j=4);
           for(var i=0;i<imgs.length;i++){
               imgs[i].className="";
               lis[i].className="";
           }
           imgs[j].className="active";
           lis[j].className="active";
        }
    }
}
for(var i=0;i<lis.length;i++){
    lis[i].onclick=function(){
        j=this.getAttribute("zpc");
        for(var i=0;i<lis.length;i++){
            lis[i].className="";
            imgs[i].className="";
        }
        lis[j].className="active";
        imgs[j].className="active";
       }
    }
    timer=setInterval(
        function(){
            j++;
            j==5&&(j=0)
            for(var i=0;i<imgs.length;i++){
                imgs[i].className="";
                lis[i].className=""; 
            }
            imgs[j].className="active";
            lis[j].className="active";
        },2000)

        banner.onmouseover=function(){
            clearInterval(timer);
        }
        banner.onmouseout=function(){
            timer=setInterval(
                function(){
                    j++;
                    j==5&&(j=0)
                    for(var i=0;i<imgs.length;i++){
                        imgs[i].className="";
                        lis[i].className=""; 
                    }
                    imgs[j].className="active";
                    lis[j].className="active";
                },2000)
        }

        // divs.onmouseover=function(){
        //     clearInterval(timer);
        // }
        // divs.onmouseover=function(){
        //     clearInterval(timer);
        // }
        // divs.onmousemove=function(){
        //         timer=setInterval(function(){
        //         j++;
        //                 if (j == 3) {
        //                     j = 0;
        //                 }
        //                 for(var i=0;i<lis.length;i++){
        //                     lis[i].className="";
        //                     imgs[i].className="";
        //                 }
        //                 lis[j].className="active";
        //                 imgs[j].className="active";
        //     },2000)
        //     }
